diverse - Menu. Hjælp mig :]- - Udvikleren.dk - Programmering, webdesign og grafik

Tags: diverse

<< < 1 2 > >>

Bruger #6505 @ 30.11.04 15:03

Hejsa. Jeg sidder i den situation at jeg endnu engang er ved at være færdig med en hjemmeside.
Det eneste jeg sådan set mangler er menuen, desværre kan jeg kan ikke få den til at blive som jeg vil have den.
Og det er der i kommer ind i billedet, hvis i vil - vel og mærke. Jeg vil prøve så godt jeg nu engang kan at forklare mit problem.

Jeg har en menu med 2 knapper i. Begge knapper er billeder, lad os kalde dem knap1 og knap2. Når man køre musen
henover knap1 skal den skifte til et andet billede, lad os kalde det Knap1A. Når man køre musen væk fra knappen skal den blive normal igen
med mindre man klikker på knappen, for klikker man på knappen skal den blive ved med at være Knap1A, også selvom man flytter musen over på Knap2.
Når man så trykker på Knap2 skal Knap1A (Knap1) blive normal igen, men så skal Knap2 blive til Knap2A.

Det skal være nemt at rette, da der skal være 10 knapper ialt.

// Zjapper

12 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #206 @ 30.11.04 16:18

252

Hejsa. Jeg sidder i den situation at jeg endnu engang er ved at være færdig med en hjemmeside.
Det eneste jeg sådan set mangler er menuen, desværre kan jeg kan ikke få den til at blive som jeg vil have den.
Og det er der i kommer ind i billedet, hvis i vil - vel og mærke. Jeg vil prøve så godt jeg nu engang kan at forklare mit problem.

Jeg har en menu med 2 knapper i. Begge knapper er billeder, lad os kalde dem knap1 og knap2. Når man køre musen
henover knap1 skal den skifte til et andet billede, lad os kalde det Knap1A. Når man køre musen væk fra knappen skal den blive normal igen
med mindre man klikker på knappen, for klikker man på knappen skal den blive ved med at være Knap1A, også selvom man flytter musen over på Knap2.
Når man så trykker på Knap2 skal Knap1A (Knap1) blive normal igen, men så skal Knap2 blive til Knap2A.

Det skal være nemt at rette, da der skal være 10 knapper ialt.

// Zjapper

Denne her burde gøre det, og den virker også i firefox

Kode

<html>
<head>
    <title>Knaptest</title>
    <style type="text/css">
        /* Style bare på for at give visuelt indtryk */
        div
        {
            font-family:Tahoma;
            font-size:0.9em;
        }
    
        div.menu
        {
            width:120px;
        }
        
        div.button
        {
            padding-top:6px;
            padding-bottom:6px;
            padding-left:4px;
            width:100%;
            color:white;
            background-color:#3862AD;
        }
        
        div.buttonhover
        {
            background-color:#aeaeae;
        }
    
    </style>
    
    <script type="text/javascript">
        /* sel er det markerede menupunkts id */
        var sel = '';
        
        /*
            funktionen dohover ændrer baggrundsfarve for element.
            hvis force = true så gennemtvinges farveskift.
        */
        function dohover(elem, force)
        {
            if(sel == '' || force == true)
            {
                elem.style.backgroundColor = '#508EFA';
            }
        }
        
        /*
            funktionen doexit ændrer baggrundsfarve for element.
            hvis force = true så gennemtvinges farveskift.
        */
        function doexit(elem, force)
        {
            if(sel == '' || force == true)
            {
                elem.style.backgroundColor = '#3862AD';
            }
        }
        
        /*
            funktionen mark markerer et element og gør at de andre
            menupunkter ikke kan vælges.        
        */
        function mark(elem)
        {
            if(sel != '')
            {
                /*Eftersom vi kun har et id, så må vi jo bruge DOM*/
                doexit(document.getElementById(sel), true);
            }
            sel = elem.id;
            dohover(elem, true);
        }
    
    </script>
</head>
<body>

<div class="menu">
    <!--
        Herunder er menupunkterne listet. Det eneste du skal sikre dig er,
        at id er noget forskelligt for hver knap. Ellers går det kuk i det.
    -->
    <div id="knap1" class="button" onmouseover="dohover(this, false);" onmouseout="doexit(this, false);" onclick="mark(this);">Knap 1</div>
    <div id="knap2" class="button" onmouseover="dohover(this, false);" onmouseout="doexit(this, false);" onclick="mark(this);">Knap 2</div>
    <div id="knap3" class="button" onmouseover="dohover(this, false);" onmouseout="doexit(this, false);" onclick="mark(this);">Knap 3</div>

</div>

</body>
</html>

Casper

Bruger #6505 @ 30.11.04 20:09

Tak, men.. Som du kan selv kan se er det 2 table agtige ting den skifter mellem, det skal være 2 billeder. Kan det lade sig gøre?

Bruger #206 @ 30.11.04 20:15

252

Tak, men.. Som du kan selv kan se er det 2 table agtige ting den skifter mellem, det skal være 2 billeder. Kan det lade sig gøre?

Du kan jo bare indlejre billederne i de divtags jeg har lavet, men sidder og prøver med billeder...

Casper

Bruger #206 @ 30.11.04 20:16

252

Hehe

der var jeg for hurtig... jeg er på det

Casper

Bruger #206 @ 30.11.04 20:28

252

Tak, men.. Som du kan selv kan se er det 2 table agtige ting den skifter mellem, det skal være 2 billeder. Kan det lade sig gøre?

Sådan:

Kode

<html>
<head>
    <title>Knaptest</title>
    
    <script type="text/javascript">
        /* sel er det markerede menupunkts id */
        var sel = '';
        
        /*
            funktionen dohover ændrer baggrundsfarve for element.
            hvis force = true så gennemtvinges farveskift.
        */
        function dohover(elem, img, force)
        {
            if(sel == '' || force == true)
            {
                elem.src = 'knaph.jpg';
            }
        }
        
        /*
            funktionen doexit ændrer baggrundsfarve for element.
            hvis force = true så gennemtvinges farveskift.
        */
        function doexit(elem, img, force)
        {
            if(sel == '' || force == true)
            {
                elem.src = 'knap.jpg';
            }
        }
        
        /*
            funktionen mark markerer et element og gør at de andre
            menupunkter ikke kan vælges.        
        */
        function mark(elem, img)
        {
            if(sel != '')
            {
                /*Eftersom vi kun har et id, så må vi jo bruge DOM*/
                doexit(document.getElementById(sel), img, true);
            }
            sel = elem.id;
            dohover(elem, img, true);
        }
    
    </script>
</head>
<body>

    <img id="knap1" src="knap.jpg" border="0" onmouseover="dohover(this, 'knaph.jpg', false);" onmouseout="doexit(this, 'knap.jpg', false);" onclick="mark(this, 'knapm.jpg');" />
    <img id="knap2" src="knap.jpg" border="0" onmouseover="dohover(this, 'knaph.jpg', false);" onmouseout="doexit(this, 'knap.jpg', false);" onclick="mark(this, 'knapm.jpg');" />
    <img id="knap3" src="knap.jpg" border="0" onmouseover="dohover(this, 'knaph.jpg', false);" onmouseout="doexit(this, 'knap.jpg', false);" onclick="mark(this, 'knapm.jpg');" />
    <img id="knap4" src="knap.jpg" border="0" onmouseover="dohover(this, 'knaph.jpg', false);" onmouseout="doexit(this, 'knap.jpg', false);" onclick="mark(this, 'knapm.jpg');" />

</body>
</html>

Casper

Bruger #6505 @ 30.11.04 20:32

Hmm, syntes ikke jeg kan få det til at virke

. Har du selv testet hvor det virker?

Bruger #206 @ 30.11.04 20:37

252

Hmm, syntes ikke jeg kan få det til at virke . Har du selv testet hvor det virker?

ja!

men har dog lige fundet en fejl... vender tilbage... måske senere... måske imorn, har en del lektier...

Casper

Bruger #6505 @ 30.11.04 20:37

Der er ca. 20 billeder

.

10

1A

og 10

1B

1A & 1B Passer sammen 1og1, så tror desværre ikke det virker med mindre du vil hjælpe mig igen.

. Håber jeg du vil :].

Bruger #6505 @ 30.11.04 20:38

Så lige dit svar. Vil virkeligt gerne have du laver det idag da jeg har deadline imorgen

Bruger #206 @ 30.11.04 20:42

252

Så lige dit svar. Vil virkeligt gerne have du laver det idag da jeg har deadline imorgen

jeg er færdig

hehe... det er klar... skal lige lave en zipfil og selvfølgelig poste det

Casper

<< < 1 2 > >>

Menu. Hjælp mig :]-

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler